<template>
  <!-- 效果测试 加一个bigBox类 -->
  <view class="bigBox">
    <view class="favoriteContainer" @tap="tovideoSample">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                动车开通之后，很多人选择坐动车旅行。
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                动-车/通/好，好/多/人/选/坐/动车/游览。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="favoriteContainer" @tap="tovideoSample">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                嗯，我想起来了，是大前天开始的，有三四天了。
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                想/等/想，大前天/开始/（食指位置从肩上开始指到空中前面【抛物线】）/捂肚子/疼。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="favoriteContainer" @tap="tovideoSample">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                长江和黄河都是我们中国的母亲河。
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                长-江/黄-河/两者都/我/中国/母亲-河/（点头）是。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="favoriteContainer" @tap="tovideoSample">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                好的，非常感谢！
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                OK，谢谢（双手）。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="favoriteContainer" @tap="tovideoSample">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                手语是聋人第一语言。
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                手语/聋人/第一/语言/是（点头）。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="favoriteContainer" @tap="tovideoSample">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                我今天认识了两位来自聋校的老师，他们一个教语文，一个教英语。
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                今天/我/认识/老师/2，工作/聋-哑-学-校，一（左）/语文/教，一（右）/英-语/教。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    handleClick() {
      this.show = true;
    },
    handleClose() {
      this.show = false;
    },
    tovideoSample() {
      uni.reLaunch({
        url: "../videoSample/videoSample?id=1",
      });
    },
  },
};
</script>

<style lang="less">
.bigBox {
  .favoriteContainer {
    margin: 3% 5%;
    height: 170rpx;
    box-shadow: 4rpx 4rpx 4rpx 2rpx rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    border-radius: 20rpx;
    .topContainer {
      background-color: rgba(197, 208, 214, 1);
      height: 40rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      > view {
        margin-right: 10rpx;
        background-color: rgb(255, 255, 255);
        height: 15rpx;
        width: 15rpx;
        border-radius: 50%;
      }
    }
    .centerContainer {
      display: flex;
      .leftContainer {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 3%;
        width: 400rpx;
        .showContainer {
          display: flex;
          flex-direction: column;
          flex: 4;
          .lineContent {
            display: flex;
            align-items: center;
            .dot {
              margin-right: 10rpx;
              background: radial-gradient(
                rgba(255, 255, 255, 1),
                rgba(197, 208, 214, 0.4),
                rgba(197, 208, 214, 0.8)
              );
              height: 20rpx;
              width: 20rpx;
              border-radius: 50%;
            }
            .wordContent {
              font-weight: bold;
              font-size: 28rpx;
              color: #333;
              width: 95%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
